<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>综合分析--宣传教育分析</title>
    <script src="../js/header.js"></script>
    <style>
        #piechart {
            /*width:800px;*/
            width: 100%;
            /*height: 300px;*/
            height: 248px;
            margin: 0px auto;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row style="border-top: 3px solid #0D9AFF;border-bottom: 1px solid #F3F3F3;margin-bottom: 10px;">
        <el-col :span="2" class="tab-title" style="margin-left: 15px;border-left: 4px solid #0D9AFF;line-height: 1em;">
            <span style="vertical-align: middle;">数据统计</span>
        </el-col>
        <el-col :span="10" style="margin-top: 7px;">
            <span>年度:</span>
            <el-date-picker
                    v-model="fileYear"
                    type="year"
                    size="mini"
                    placeholder="请选择"
                    format="yyyy"
                    value-format="yyyy"
                    style="width: 180px;"
                    @change="changeYear">
            </el-date-picker>
        </el-col>
    </el-row>
    <el-row :gutter="20" style="overflow: hidden;margin: 0;">
        <el-col :span="12" class="echarts_wrap">
            <el-row style="border-bottom: 1px solid #ddd;">
                <el-col class="tab-title">
                    <img src="../images/quyusaomiao.png" style="vertical-align: middle;" />
                    <span style="vertical-align: middle;">区域宣传教育统计</span>
                </el-col>
            </el-row>
            <el-row>
                <!--<el-col style="height: 748px;">-->
                <el-col style="height: 696px;">
                    <div id="main"></div>
                </el-col>
            </el-row>
        </el-col>
        <!--<el-col :span="12" style="padding-right: 0;height: 748px;">-->
        <el-col :span="12" style="padding-right: 0;height: 696px;">
            <el-row>
                <el-col class="echarts_wrap">
                    <el-row style="border-bottom: 1px solid #ddd;">
                        <el-col class="tab-title">
                            <img src="../images/ico_xinyon.png" style="vertical-align: middle;" />
                            <span style="vertical-align: middle;">宣传教育总览</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!--<el-col style="height: 364px;">-->
                        <el-col style="height: 338px;">
                            <div id="barchart"></div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col class="echarts_wrap" style="margin-top: 10px;">
                    <el-row style="border-bottom: 1px solid #ddd;">
                        <el-col class="tab-title">
                            <img src="../images/tongji.png" style="vertical-align: middle;" />
                            <span style="vertical-align: middle;">宣传教育统计</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!--<el-col style="height: 364px;">-->
                        <el-col style="height: 338px;">
                            <div id="piechart"></div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-col>
    </el-row>

    <el-dialog
            title=""
            :visible.sync="dialogTableVisible"
            center="true"
            width="45%">
        <div>
            <el-row>
                <el-col style="height: 30px;text-align: center;">{{ city.cityName }}</el-col>
                <el-col v-if="orgName == '中国'">
                    <el-col :span="12">
                        <el-row id="dialog">
                            <el-col style=" height: 30px;text-align: center;">总数</el-col>
                            <el-col >
                                <div class="dialog">
                                    <div class="dialog_num">{{ city.cityCounts }}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12" >
                        <el-row id="dialog">
                            <el-col style=" height: 30px;text-align: center;">占全国比例</el-col>
                            <el-col >
                                <div class="dialog">
                                    <div class="dialog_num">{{ (city.cityCounts / cityTotal * 100) | numFilter  }}%</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-col>
                <el-col v-if="orgName != '中国'">
                    <el-col :span="24">
                        <el-row id="dialog">
                            <el-col style=" height: 30px;text-align: center;">总数</el-col>
                            <el-col >
                                <div class="dialog">
                                    <div class="dialog_num">{{ city.cityCounts }}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</div>
</body>
<script>
    var UIEcharts = new Vue({
        el: '#app',
        data(){
            return{
                // setHeight: `$(document.documentElement.clientHeight)`
                /*setHeight: window.innerHeight + 'px',
                setHeight2: (window.innerHeight)/2 - 57 + 'px'*/
                dialogTableVisible: false,
                city: {
                    cityName: '',
                    cityCounts: '3'
                },
                cityTotal: '100',
                fileYear: '',
                orgName: ''
            }
        },
        filters: {
            numFilter (value) {
                // 截取当前数据到小数点后两位
                let realVal = parseFloat(value).toFixed(2)
                return realVal
            }
        },
        mounted() {
            let date=new Date();
            let year=date.getFullYear().toString();
            this.fileYear=year;
            this.mapFn();
            this.pieChart();
            this.barChart();
            // this.setHeight = document.documentElement.clientHeight;
            /*var _this = this;
            _this.setHeight = 200;*/
            //挂载浏览器高度获取方法
            // const that = this;
            var barChart = echarts.init(document.getElementById('barchart'));
            var myChart = echarts.init(document.getElementById('main'));
            var pieChart = echarts.init(document.getElementById('piechart'));

            window.onresize = () => {
                barChart.resize();
                myChart.resize();
                pieChart.resize();
            }

            // this.$refs.nav.style.height=this.winHeight+'px'
        },
        created(){
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.orgLevel = userInfo.orgLevel;
            // 中国地震局 ==> 中国, 山东省-济南市地震局 ==> 山东省-济南市
            this.orgName = userInfo.orgName.replace("地震局", "");
        },
        watch: {
            //监控浏览器高度变化
            winHeight(val) {
                this.setHeight = val + 'px';
                // this.$refs.nav.style.height=this.winHeight+'px'
            }
        },
        methods: {
            mapFn() {
                var dataList;
                var myChart = echarts.init(document.getElementById('main'));
                var $this = this;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/education/mapByYear',
                    params:{
                        year: $this.fileYear
                    }
                })
                    .then(response => {
                        let data = response.data;
                        if(data.code == 200) {
                            dataList = JSON.parse(data.data);
                            $this.cityTotal = JSON.parse(data.cityTotal);
                            option = {
                                tooltip: {
                                    formatter: function(params) {
                                        if(params.value){
                                            return params.seriesName + '<br/>' + params.name + ' : ' + params.value;
                                        }else{
                                            return params.seriesName + '<br/>' + params.name + ' : ' + '0';
                                        }
                                    } //数据格式化
                                },
                                visualMap: {
                                    min: 0,
                                    max: 1500,
                                    left: 'left',
                                    top: 'bottom',
                                    text: ['高', '低'], //取值范围的文字
                                    inRange: {
                                        color: ['#e0ffff', '#006edd'] //取值范围的颜色
                                    },
                                    show: false //图注
                                },
                                geo: {
                                    map: 'china',
                                    roam: false, //不开启缩放和平移
                                    zoom: 1.23, //视角缩放比例
                                    label: {
                                        normal: {
                                            show: true,
                                            fontSize: '10',
                                            color: 'rgba(0,0,0,0.7)'
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            borderColor: 'rgba(0, 0, 0, 0.2)'
                                        },
                                        emphasis: {
                                            areaColor: '#F3B329', //鼠标选择区域颜色
                                            shadowOffsetX: 0,
                                            shadowOffsetY: 0,
                                            shadowBlur: 20,
                                            borderWidth: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                },
                                series: [{
                                    name: '材料上传数量',
                                    type: 'map',
                                    geoIndex: 0,
                                    data: dataList
                                }]
                            };
                            myChart.setOption(option);
                            // 地图点击事件
                            myChart.on('click', function (params) {
                                $this.dialogTableVisible = true;
                                $this.city.cityName = params.name;
                                if(params.value){
                                    $this.city.cityCounts = params.value;
                                }else{
                                    $this.city.cityCounts = 0;
                                }
                            });
                        }
                    });


            },
            barChart() {
                option = {
                    /*title: {
                        text: '世界人口总量',
                        subtext: '数据来自网络'
                    },*/
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        left: 'center',
                        data: ['']
                    },
                    grid: {
                        left: '5%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        show: true,
                        type: 'category',
                        // data: ['北京局', '天津局', '河北局', '山西局', '内蒙古局', '辽宁局'],
                        name: '各局名称',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        show: true,
                        type: 'value',
                        name: '数值'
                        /* //隐藏刻度尺
                        axisTick: {
                            show: false
                        }, */
                        //隐藏坐标线
                        /* axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#000000'
                            }
                        }, */
                    },
                    series: [
                        {
                            /* name: '2011年', */
                            type: 'bar',
                            itemStyle: {
                                borderWidth: {},
                                normal: {
                                    //控制柱状图颜色，定义一个list，然后根据所以取得不同的值
                                    color: function(params) {
                                        var colorList = [
                                            '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                        ];
                                        return colorList[params.dataIndex]
                                    },

                                },
                            },
                        }
                    ]
                };
                var barChart = echarts.init(document.getElementById('barchart'));
                barChart.setOption(option);
                var $this = this;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/education/getbaryear',
                    params:{
                        year:$this.fileYear
                    }
                }).then(response=>{
                    let data=response.data;
                    if(data.code == 200){
                        var materialData = data.data;
                        var dac = [],xlist = [];
                        materialData.forEach(function(item,index){
                            dac.push(item.value);
                            xlist.push(item.name);
                        });


                        barChart.setOption({
                            xAxis: {
                                data: xlist
                            },
                            series: [
                                {
                                    name: '材料上传数量',
                                    data: dac
                                }
                            ]
                        });
                    }
                });

                barChart.resize();
            },
            pieChart() {
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    /* 	grid: {
                            top: '10%', //距上边距
                            left: '10%', //距离左边距
                            right: '10%', //距离右边距
                            bottom: '10%', //距离下边距
                            containLabel: true
                        }, */
                    legend: {
                        orient: 'vertical',
                        // x: '10', //可设定图例在左、右、居中
                        y: '50', //可设定图例在上、下、居中
                        left: '100',
                        padding: [10, 50, 0, 0],
                        // data: ['北京局', '天津局', '河北局', '山西局', '内蒙古局', '辽宁局']
                    },
                    series: [
                        {
                            name: '材料上传数量',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: '60%',
                            center: ['50%', '50%'],
                            label: {
                                normal: {
                                    // show: 'false',
                                    // position: 'inside',
                                    formatter: '{d}%'
                                }
                            },
                            data: [
                                // {
                                //     value: 335,
                                //     name: '北京局',
                                //     selected: true
                                // },
                                // {
                                //     value: 310,
                                //     name: '天津局'
                                // },
                                // {
                                //     value: 234,
                                //     name: '河北局'
                                // },
                                // {
                                //     value: 135,
                                //     name: '山西局'
                                // },
                                // {
                                //     value: 1548,
                                //     name: '辽宁局'
                                // },
                                // {
                                //     value: 1548,
                                //     name: '内蒙古局'
                                // }
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal:{
                                    color:function(params) {
                                        //自定义颜色
                                        var colorList = [
                                            '#FACC14', '#223273', '#8543E0', '#1890FF', '#2FC25B','#00fffe'
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }
                        }
                    ]
                };
                var pieChart = echarts.init(document.getElementById('piechart'));
                pieChart.setOption(option);
                var $this = this;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/education/getpieyear',
                    params:{
                        year:$this.fileYear
                    }
                }).then(response=>{
                    let data=response.data;
                    if(data.code == 200){
                        console.log(data);
                        var materialData = data.data;

                        var dac = [],xlist = [];
                        materialData.forEach(function(item,index){
                            dac.push(item.value);
                            xlist.push(item.name);
                        });


                        pieChart.setOption({
                            legend: {
                                data: xlist
                            },
                            series: [
                                {
                                    name: '材料上传数量',
                                    data: materialData
                                }
                            ]
                        });
                    }
                });

                pieChart.resize();

            },
            changeYear() {
                this.mapFn();
                this.pieChart();
                this.barChart();
                /* return mapFn(); */
            }
        }
    })
</script>
</html>
